<template>
	<div id="queren">
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko" @click="fanhui">
					<van-icon name="arrow-left" />
				</div>
				<div slot="title" class="cellbox">确认订单</div>
			</van-cell>

		</div>
		<div v-if="dizhiBloo" @click="onAdd">
			<!-- <van-contact-card type="add" @click="onAdd" /> -->

			<div class="boxDiz">
				<div class="left-icon">
					<img src="../assets/images/tj.png" />
				</div>
				<div class="tisDizhi">
					添加地址
				</div>
				<div class="right-icon">
					<van-icon name="arrow" size="18px" />
				</div>
			</div>

		</div>
		<div v-else>
			<div v-if="isArr" @click="addDzhi">
				<div class="boxDiz">
					<div class="icondz">
						<van-icon name="location-o" size="25px" />
					</div>
					<div class="dizhi">
						<div class="name">{{moren.name}}<span>{{moren.mobile}}</span></div>
						<div class="neir">{{moren.address}}</div>
					</div>
				</div>

			</div>
			<div @click="addDzhi" v-else>
				<div class="boxDiz">
					<div class="icondz">
						<van-icon name="location-o" size="23px" />
					</div>
					<div class="dizhi">
						<div class="name">{{address.name}}<span>{{address.tel}}</span></div>
						<div class="neir">{{address.address}}</div>
					</div>
				</div>
			</div>
		</div>
		<!--  -->
		<van-panel>
			<div class="vanflex">
				<div class="vanImg"><img :src="objArr.image" /></div>
				<div class="van-wenzi">
					<div class="biaoti">{{objArr.product_title}}</div>
					<div class="guige">
						<div>规格：{{objArr.title}}</div>
						<div>x{{objArr.amount}}</div>
					</div>
					<div class="qian">￥{{objArr.price}}</div>
				</div>
			</div>
			<div class="dingdansp">
				<van-cell title="配送方式" value="快递 免邮" size="large" />
				<van-cell title="运费险" value="由卖家赠送" size="large" />
				<van-field v-model="value" label="卖家留言" placeholder="给卖家留言哦" />
			</div>

			<template #footer>
				<div class="footer">
					<div class="icondz">合计</div>
					<div class="dizhi">￥{{objSum}}</div>
				</div>
			</template>
		</van-panel>
		<!-- 底部按钮 -->
		<div class="dibuBtn">
			<van-button type="primary" block round color="#343434" @click='chakanBtn'>确认支付</van-button>
		</div>
	</div>
</template>

<script>
	import {
		ContactCard
	} from 'vant';
	import {
		Toast
	} from 'vant';
	import {
		Panel
	} from 'vant';
	import {
		Button
	} from 'vant';
	import {
		Field
	} from 'vant';
	import {
		Cell,
		CellGroup
	} from 'vant';
	import {
		GoodsAction,
		GoodsActionIcon,
		GoodsActionButton,

	} from 'vant';
	import {
		Icon
	} from 'vant';
	/*
	存在的bug，
	1.如果地址不为空时且不为默认时，提交会报错
	2.调用地址查询会有异步，在调用数据成功后判断会产生时间差
	*/
	
	
	export default {
		data() {
			return {
				list: [],
				isArr: false,
				value: '',
				objArr: {},
				address: [],
				moren: [],
				dizhiBloo: true

			};
		},
		created() {
			let obs = decodeURIComponent(this.$route.params.conter)
			this.objArr = JSON.parse(obs)
			// console.log(this.objArr)
			// 请求所有地址
			this.$get(this.$API.USERS_CONTECT, {
				userId: this.$store.state.nameId.userid
			}).then(res => {
				console.log(res)
				for (let i = 0; i < res.data.length; i++) {
					if (res.data[i] != []) {
						this.dizhiBloo = false
					}
					if (res.data[i].contact_flag == 1 && !localStorage.getItem('address')) {
						this.isArr = true
						this.moren = res.data[i]

					} else {
						this.address = JSON.parse(localStorage.getItem('address'))
					}

				}

			}).catch(err => {
				console.log(err)
			})


			console.log(this.addres)

		},
		computed: {
			objSum() {
				let sum = this.objArr.price * this.objArr.amount
				return sum
			}
		},
		// 页面卸载的时候清除地址缓存
		destroyed() {
			localStorage.removeItem('address')
		},
		methods: {
			// 没有地址时添加地址
			onAdd() {
				this.$router.push({
					path: '/address'
				})
			},
			// 更换地址
			addDzhi() {

				this.$router.push({
					path: '/address'
				})
			},
			// 提交订单
			chakanBtn() {
				// 查询地址接口，判断地址是否为空
				this.$get(this.$API.USERS_CONTECT, {
					userId: this.$store.state.nameId.userid
				}).then(res => {
					console.log(res)
					if (res.data != '') {
						// 判断地址是默认的地址内容还是临时的地址内容
						let contactName = this.isArr == true ? this.moren.name : this.address.name
						let contactPhone = this.isArr == true ? this.moren.mobile : this.address.tel
						let address = this.isArr == true ? this.moren.address : this.address.address
						console.log(contactName)
						this.$get(this.$API.ORDERS_ADD, {
							userId: this.$store.state.nameId.userid,
							address: address, //地址
							contactName: contactName, //收货人名字
							contactPhone: contactPhone, //电话
							remark: this.value, //留言
							total: this.objSum, //总金额
							productId: this.objArr.product_id, //商品id
							productSkuId: this.objArr.product_sku_id, //商品分类id
							number: this.objArr.amount, //商品数量
							price: this.objArr.price //商品价格 
						}).then(res => {
							console.log(res)
						}).catch(err => {
							console.log(err)
						})
						this.$router.push({
							path: '/payment'
						})

					} else {
						console.log('地址为空')
						Toast.fail({
							message: '收货地址不能为空',
							duration: 800
						});
					}
				})





			},
			fanhui() {
				this.$router.push({
					path: '/about'
				})
			},

		},
		components: {
			[ContactCard.name]: ContactCard,
			[Toast.name]: Toast,
			[Panel.name]: Panel,
			[Button.name]: Button,
			[Field.name]: Field,
			[Cell.name]: Cell,
			[GoodsAction.name]: GoodsAction,
			[CellGroup.name]: CellGroup,
			[GoodsActionIcon.name]: GoodsActionIcon,
			[GoodsActionButton.name]: GoodsActionButton,
			[Icon.name]: Icon,

		}
	}
</script>

<style lang="less" scoped>
	@width: 100vw;
	@display: flex;
	@margin: 0 auto;
	@wid90: 90vw;
	@padding: 0 17px;

	// #queren {
	// 	height: 100vh;
	// 	background-color:#f6f6f6;
	// }
	.boxDiz {
		width: 100vw;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 20px;
		box-sizing: border-box;
		border-bottom: 1px solid #f6f6f6;

		.icondz {
			flex: 1;
			// border: 1px solid;
			text-align: center;

		}

		.dizhi {
			flex: 9;
			font-size: 13px;

			.name {
				font-weight: bold;

				>span {
					color: #999999;
					font-weight: normal;
					margin-left: 10px;
				}
			}
		}

		.left-icon {
			width: 30px;
			height: 30px;

			>img {
				width: 100%;
				height: 100%;
			}
		}

		.tisDizhi {
			// border: 1px solid red;
			width: 240px;
			font-size: 17px;
		}

	}

	.vanflex {
		width: @width;
		height: 135px;
		display: flex;
		justify-content: space-between;
		padding: @padding;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(100, 100, 100, 0.05);
		margin-top: 30px;

		.vanImg {
			flex: 1;

			img {
				width: 100%;
				height: 130px;
				border-radius: 5px;
			}
		}

		.van-wenzi {
			flex: 2;
			padding-left: 15px;
			margin-top: 5px;

			.biaoti {
				font-size: 15px;
				font-weight: bold;
			}

			.guige {
				height: 50px;
				display: flex;
				align-content: center;
				justify-content: space-between;
				margin-top: 10px;
				color: #999999;
				font-size: 14px;
			}

			.qian {
				color: #A8896D;
				font-weight: bold;
				font-size: 17px;
				margin-top: -2px;
			}
		}

	}

	.footer {
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.dibuBtn {
		width: 70vw;
		margin: 30px auto;
	}

	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
	}

	.cellbox {
		font-size: 15px;
		text-align: center;
	}

	.iconko {
		font-size: 20px;
	}
</style>
